<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用key来管理元素之间的独立性</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_key">
        <h1>不用key属性，用来保留切换文本框后的数据：效率高</h1>
        <template v-if="noKeyIf">
            <label>UserName:</label>
            <input placeholder="Enter your userName!">
        </template>
        <template v-else>
            <label>Email:</label>
            <input placeholder="Enter your Email!">
        </template>
        <br>
        <button v-on:click="checkLoginNoKey">点击切换</button>
        <br>


        <h1>使用key属性，用来去除切换文本框后的数据：重新渲染</h1>
        <template v-if="withKeyIf">
            <label>UserName:</label>
            <input placeholder="Enter your userName!" key="input_username">
        </template>
        <template v-else>
            <label>Email:</label>
            <input placeholder="Enter your Email!" key="input_email">
        </template>
        <br>
        <button v-on:click="checkLoginWithKey">点击切换</button>

        <br>
        <p>对于第二部分，因为label没有指定key，所以vue也会复用</p>
    </div>




    <script>
        var app_key = new Vue({
            el:'#app_key',
            data:{
                noKeyIf:true,
                withKeyIf:true
            },
            methods:{
                checkLoginNoKey:function () {
                    this.noKeyIf = !this.noKeyIf ;
                },
                checkLoginWithKey:function () {
                    this.withKeyIf = !this.withKeyIf ;
                },

            }
        })

    </script>
</body>
</html>